<template>
  <div class="main">
    <el-row>
      <el-col>
        <div class="outer">
          <el-button @click="outerTest">退出测试</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="letter-opening">测测你的焦虑水平(SCARED)</div>
      </el-col>
    </el-row>

    <!-- 改变区域 -->
    <div>
      
        <div v-if="flag == 1" class="letter">
          <p>没有问卷！谢谢！</p>
        </div>
        <div v-else class="letter">
          <div v-if="num_id < num_question" class="letter">
            <p>
              {{num_id+1}}.{{ testList.scaleQuestionList[num_id].questionContent }}
            </p>
            <el-radio-group v-model="userAnswer[testList.scaleQuestionList[num_id].questionId]" @change="nextQuestion">
                <el-radio 
                  v-for="(answer, answerIndex) in testList.scaleQuestionList[num_id].scaleAnswerList" 
                  :key="answerIndex" 
                  :label="answer.answerId" 
                  :value="answer"
                  style="display: block; margin-bottom: 15px; font-size: 10px;">
                  {{answer.answerOption}}
                </el-radio>
            </el-radio-group>
            <el-progress 
              :percentage="(num_id / num_question) * 100"  
              :show-text="false"
              class="show_progress">
            </el-progress>
            {{num_id+1}}/{{num_question}}
          </div>
          <div v-else>
            <p>问卷已完成！谢谢！</p>
          </div>
        </div>
      
    </div>

  </div>
</template>

<script>
import { getTest,getScaleUserResult } from "@/api/mentalTest/myTest";

export default {
  name:"AnswerInfo",
  data () {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 我的测验表格数据
      testList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //传过来的scaleId
      scaleId:null,
      //列表id
      id:null,
      //问题个数
      num_question:null,
      //循环问题个数
      num_id:0,
      flag:0,

      // 查询参数
      queryParams:{
        scaleTitle:null,
        scaleQuestionList:{
          questionId:null,
          questionOrder:null,
          questionContent:null,
          scaleAnswerList:{
            answerId:null,
            answerOption:null,
          }
        }
      },
      form: {
        scaleId: null,
        scaleTitle:null,
        scaleQuestionList:{
          questionId:null,
          questionOrder:null,
          questionContent:null,
          scaleAnswerList:{
            answerId:null,
            answerOption:null,
          }
        }
      },
      //传回去的数据
      userAnswer:{
        scaleId:null,
        id:null,
        // map:{
        //   questionId:answerId,
        // }
      }
      
    }
  },
  created() {
    this.getList();
  },
  // 在 Vue 组件中
  // 使用 beforeRouteEnter 导航守卫
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getList();
    });
  },
  methods: {
    //获取路由参数
    getRouterQuery () {
      this.scaleId = this.$router.history.current.query.scaleId
      this.id = this.$router.history.current.query.id
    },
    //获取所有作答题目
    getList () {
      this.reset();
      this.loading = true;
      this.getRouterQuery();
      this.num_id = 0;
      console.log("id是",this.scaleId);
      getTest(this.scaleId).then(response => {
        console.log("res",response.data);
        //得到问题的个数
        if(response.data === undefined){
          this.flag = 1;
          console.log("啥也没有");
        }else{
          this.flag = 0;
          this.testList = response.data;
          console.log("想瞅瞅scaleQuestionList");
          this.num_question = this.testList['scaleQuestionList'].length;
          console.log("问题个数",this.num_question);
          if(this.num_question === undefined){
            console.log("啥也没有呀");
          }else{
            console.log("有问题");
          }
        }
          this.loading = false;
      });
    },
    reset() {
      this.queryParams = {
        scaleTitle:null,
        scaleQuestionList:{
          questionId:null,
          questionOrder:null,
          questionContent:null,
          scaleAnswerList:{
            answerId:null,
            answerOption:null,
          }
        }
      },
      this.form = {
        scaleTitle:null,
        scaleQuestionList:{
          questionId:null,
          questionOrder:null,
          questionContent:null,
          scaleAnswerList:{
            answerId:null,
            answerOption:null,
          }
        }
      };
      this.testList=[];
      this.resetForm("form");
    },
    //选择好则跳转到下一个需要作答的问题
    nextQuestion(answerId){
      //传回去的scaleId
      this.userAnswer.scaleId = this.scaleId;
      this.userAnswer.id = this.id;
      console.log("answerId",answerId);
      const questionId = this.testList['scaleQuestionList'][this.num_id].questionId;
      console.log("questionId",questionId);
      // this.userAnswer['mapList'].questionId = questionId;
      // this.userAnswer['mapList'].answerId = answerId;
      console.log("传回去的数据",this.userAnswer);
      //进度条+1
      this.num_id++;
      if(this.num_id == this.num_question){
        this.onSubmit();
      }
    },
    // 参与作答结束路由跳转
    onSubmit () {
      console.log("userAnswer",this.userAnswer);
      const userAnswer_str1 = JSON.stringify(this.userAnswer)
      const userAnswer_str2 = userAnswer_str1.replace(/[:,]/g, (match) => (match === "," ? "&" : "="));
      const userAnswer_str3 = userAnswer_str2.replace(/["“”]/g, "");
      const userAnswer_str = userAnswer_str3.replace(/[{}]/g, '');
      console.log("变成JSON格式的string",userAnswer_str);
      getScaleUserResult(userAnswer_str).then(response => {
        this.$modal.msgSuccess("新增成功");
      })
    },
    // 返回路由跳转
    outerTest () {
      this.$router.push({
        path: '/mentalTest/myTest',
        query: {
          // scaleId: row.scaleId
        }
      })
    }
  }

}
</script>

<style>
.main {
  padding-top: 20px;
}
.outer {
  text-align: right;
  padding-right: 20px;
}
.letter-opening {
  display: flex;
  justify-content: center;
  align-content: center;
  font-size: 30px;
  font-weight: bold;
}

.show_progress {
  margin-top: 35px;
  margin-bottom: 20px;
  width: 20%;
}
.letter {
  font-size:20px;
  font-weight: bold;
  margin-bottom: 30px;
  margin-left: 5%;
}


</style>